export const render = function () {
  var canvas = document.getElementById('c')
  var ctx = canvas.getContext('2d')
  // range控件信息
  var rangeValue = 50
  // console.log(rangeValue)
  var nowRange = 50 // 用于做一个临时的range
  // 画布属性
  var mW = canvas.width = 250
  var mH = canvas.height = 250
  var lineWidth = 2
  // 圆属性
  var r = mH / 2 // 圆心
  var cR = r - 16 * lineWidth // 圆半径
  // Sin 曲线属性
  var sX = 0
  // var sY = mH / 2
  var axisLength = mW // 轴长
  var waveWidth = 0.1 // 波浪宽度,数越小越宽
  var waveHeight = 4 // 波浪高度,数越大越高
  var speed = 0.1 // 波浪速度，数越大速度越快
  var xOffset = 1 // 波浪x偏移量
  ctx.lineWidth = lineWidth
  // 画圈函数
  var IsdrawCircled = false
  var drawCircle = function () {
    ctx.beginPath()
    ctx.strokeStyle = '#1080d0'
    ctx.arc(r, r, (cR + 5), 0, 2 * Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(r, r, cR, 0, 2 * Math.PI)
    ctx.clip()
  }
  // 画sin 曲线函数
  var drawSin = function (xOffset) {
    ctx.save()
    var points = []
    ctx.beginPath()
    for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {
      var y = -Math.sin((sX + x) * waveWidth + xOffset)
      var dY = mH * (1 - nowRange / 100)
      points.push([x, dY + y * waveHeight])
      ctx.lineTo(x, dY + y * waveHeight)
    }
    // 封闭路径
    ctx.lineTo(axisLength, mH)
    ctx.lineTo(sX, mH)
    ctx.lineTo(points[0][0], points[0][1])
    ctx.fillStyle = '#1c86d1'
    ctx.fill()
    ctx.restore()
  }
  // 写百分比文本函数
  var drawText = function () {
    ctx.save()
    var size = 0.4 * cR
    ctx.font = size + 'px Microsoft Yahei'
    ctx.textAlign = 'center'
    ctx.fillStyle = 'rgba(06, 85, 128, 0.8)'
    ctx.fillText(~~nowRange + '%', r, r + size / 2)
    ctx.restore()
  }
  ctx.clearRect(0, 0, mW, mH)
  if (IsdrawCircled === false) {
    drawCircle()
  }
  var tmp = 0
  if (nowRange <= rangeValue) {
    nowRange += tmp
  }
  if (nowRange > rangeValue) {
    nowRange -= tmp
  }
  drawSin(xOffset)
  drawText()
  xOffset += speed
  window.requestAnimationFrame(render)
}
